
<template>
  <div class="app-container">
    <!-- 添加或修改学生信息对话框 -->
    <el-dialog
      :title="title"
      :visible.sync="visibleSync"
      width="900px"
      append-to-body
    >
      <el-form
        ref="form"
        :model="pupilProfile"
        :rules="rules"
        label-width="80px"
      >
        <div class="titlw">学生信息</div>
        <el-row>
          <el-col :span="12">
            <el-form-item label="学生姓名" prop="studentCode">
              <el-input
                v-model="pupilProfile.studentCode"
                placeholder="请输入学生姓名"
                maxlength="30"
                :disabled="displays"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="学生姓名" prop="name">
              <el-input
                v-model="pupilProfile.name"
                placeholder="请输入学生姓名"
                maxlength="30"
                :disabled="displays"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <div class="titlw">关联方案</div>
        <div class="stage" v-for="(item, index) in projectList" :key="index">
          <div class="stageItem">
            <el-form-item :label="'第' + (index + 1) + '阶段'">
              <el-input v-model="item.age" />
            </el-form-item>
          </div>
          <div class="stageItem">
            <el-input v-model="item.age" />
          </div>
          <div class="stageItem">
            <el-select
              v-model="item.schemeId"
              multiple
              placeholder="请选择关联方案"
              style="width: 255px"
            >
              <el-option
                v-for="item in schemeLiat"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
          </div>
          <div class="stageicon">
            <div>
              <i
                class="el-icon-circle-plus-outline"
                font-size="16px"
                @click="plus"
              ></i>
            </div>
            <div v-if="index !== 0">
              <i class="el-icon-remove-outline" @click="minus(index)"></i>
            </div>
          </div>
        </div>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  schemePage, //方案列表
} from "@/api/healthCounseling/index";
export default {
  dicts: ["sys_normal_disable", "sys_user_sex", "sys_label_type"],
  props: {
    // 学生参数
    pupilProfile: {
      type: Object,
      default: {},
    },
  },
  data() {
    return {
      // 遮罩层
      loading: true,
      visibleSync: false,
      title: "辅导方案",
      form: {},
      displays: true,
      projectList: [
        {
          schemeId: null,
        },
      ],
      // 方案
      schemeLiat: [],
      // 表单校验
      rules: {
        name: [
          { required: true, message: "学生姓名不能为空", trigger: "blur" },
          {
            // min: 2,
            // max: 20,
            // message: "用户名称长度必须介于 2 和 20 之间",
            trigger: "blur",
          },
        ],
        schoolId: [
          { required: true, message: "所属学校不能为空", trigger: "blur" },
        ],
        classId: [
          {
            required: true,
            message: "请先选择有班级的学校,班级不能为空",
            trigger: "blur",
          },
        ],
      },
    };
  },
  watch: {},
  created() {
    this.getScheme();
  },
  methods: {
    getScheme() {
      schemePage({ pageSize: 999 }).then((res) => {
        this.schemeLiat = res.rows;
        console.log("666", res.rows);
      });
    },
    plus() {
      let date = {
        schemeId: null,
      };
      this.projectList.push(date);
    },
    minus(index) {
      this.projectList.splice(
        this.projectList.findIndex((item) => item === index),
        1
      );
    },
    // 提交
    submitForm() {},
    // 取消
    cancel() {
      this.visibleSync = false;
      this.$emit("shut", false);
    },
  },
};
</script>
<style lang="scss" scoped>
.titlw {
  width: 150px;
  height: 20px;
  line-height: 20px;
  // margin-top: -20px;
  margin-bottom: 15px;
  color: #204f7f;
  padding-left: 10px;
  font-size: 18px;
}
.stage {
  display: flex;
  .stageicon {
    margin-left: 5px;
    font-size: 18px;
  }
}
</style>
